<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="$t('orderSendDia.商品发货')"
    width="600px"
  >
    <div class="">
      <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
        <el-form-item :label="$t('orderSendDia.快递单号')" prop="sendNo">
          <el-input v-model="form.sendNo" :placeholder="$t('orderSendDia.请输入')" />
        </el-form-item>
        <el-form-item :label="$t('orderSendDia.快递公司')" prop="sendCode">
          <el-select v-model="form.sendCode">
            <el-option
              v-for="item in expressCompanyOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const show = defineModel();
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});
const formRef = ref();
const expressCompanyOptions = [
  { label: t('orderSendDia.申通快递'), id: 1 },
  { label: t('orderSendDia.京东快递'), id: 1 },
  { label: t('orderSendDia.顺丰快递'), id: 1 },
];
const form = ref({
  sendNo: "",
  sendCode: "",
});
const rules = ref({
  sendNo: [{ required: true, message: t('orderSendDia.请输入快递单号'), trigger: "blur" }],
  sendCode: [{ required: true, message: t('orderSendDia.请选择快递公司'), trigger: "change" }],
});
watch(show, (val) => {
  if (val) {
  }
});
const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      
    } else {
      console.log("error submit!!");
    }
  });
};
const close = () => {
  form.value = {
    sendNo: "",
    sendCode: "",
  };
  show.value = false;
};
</script>
<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
.address {
  .address-item {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    .address-item-address {
      font-size: 12px;
      color: #999;
    }

    &:hover {
      border-color: #ff7e28;
    }
    &.active {
      border-color: #ff7e28;
    }
  }
}
</style>
